<template>
    <div class="identity">
        <div class="content">

            <div class="verify-info">
                <div class="verify-content">
                    <div class="country">
                        <div class="id-info" @click="showDiv">
                            <span>*</span>
                            <label for="">国籍</label>
                            <input type="text" v-model="countrys" placeholder="请选择国家" ref="countrys" disabled value="">
                        </div>
                        <van-popup v-model="showCountry" psosition="botton" :overlay="true">
                            <van-picker show-toolbar title="请选择国家" :columns="columns" @cancel="onCancel" @confirm="onConfirm"></van-picker>
                        </van-popup>
                      
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from "vue"
import axios from "axios"
// import qs from 'qs'
import {
    countryList,
} from "../../../axios/api.js"
import {
    NavBar,
    Cell,
    CellGroup,
    Field,
    Popup,
    Picker,
} from "vant"
export default {
    components: {
        [NavBar.name]: NavBar,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Popup.name]: Popup,
        [Picker.name]: Picker,
    },
    data() {
        return {
            showCountry: false,
            showIdType: false,
            columns:["身份证","护照","驾驶证"],
            idtype: ["身份证","护照","驾驶证"],
            token: "",
            countrys: "",
            myCountry:"请选择国家"
        }
    },
     created() {
        //国籍
        countryList().then(res => {
            const list = res.data.data;
            console.log(list)
            for (const i in list) {
                const items = list[i];
                const countryChineseName = items.countryChineseName;
                this.columns.push(items.countryChineseName);
            }
        })
    },
    methods: {
        // 控制国家列表的显示隐藏
        showDiv() {
            this.showCountry = true;
        },
        // 控制证件类型的显示隐藏
        showID() {
            this.showIdType = true;
        },
        onCancel(picker) {
            this.showCountry = false;//表示点击取消的时候,组件隐藏掉,关闭
            this.showIdType = false;
        },
        onConfirm(value) {
            this.showCountry = false;
            this.showIdType = false;
            this.$refs.countrys.value = value;
            this.myCard = value;
            this.countrys = value;
            console.log(this.$refs.countrys.value)
        },

    }
}
</script>
<style lang="less" scoped>
@import "../../../assets/less/variable.less";
.van-cell
.van-cell__left-icon {
    font-size: 10px;
    color: @theme_color;
}
.van-cell__title,.van-cell__value {
    flex: auto;
    text-align: left;
}
.van-cell--required::before {
    left: 15px;
}
/deep/ .van-field__label {
    text-align: left;
    margin-left: 10px;
}
.van-cell:not(:last-child)::after {
    border-bottom: 0;
}
.van-cell {
    text-align: left;
}
.van-popup {
    position: fixed;
    top: 83.4%;
    width: 100%;
}
.identity {
    background: #fff;
    .content {

        .verify-info {
            .notice {
                padding: 10px 15px;
                text-align: left;
                font-size: 14px;
                color:#999;
            }
            .verify-content {
                .country {
                    .id-info {
                        text-align: left;
                        padding: 10px 15px;
                        width: 100%;
                        background-color: #fff;
                        border-bottom: 1px solid #ebedf0;
                        box-sizing: border-box;
                        line-height: 24px;
                        position: relative;
                        background-color: #fff;
                        color: #323233;
                        font-size: 14px;
                        span {
                            color: #f44;
                        }
                        input {
                            border: 0;
                            width: 62%;
                            background: #fff;
                            margin-left: 60px;
                        }
                    }
                    .icon-star {
                        font-size: 12px;
                        color: @theme_color;
                    }
                    .photo::after {
                        border-width: 0;
                    }
                    .ipt {
                        padding: 15px 15px 0 15px;
                    }
                    .detail {
                        padding: 0 15px;
                        text-align: left;
                        color: #969799;
                    }
                    .tips {
                        padding: 10px 15px;
                        text-align: left;
                        color: #969799;
                    }
                    .submit {
                        margin: .67rem 0;
                        width: 100%;
                        background-color: #fff;
                        color: #fff;
                        font-size: @base_textSize;
                        .submit-btn {
                            padding: 10px;
                            width: 90%;
                            height: 1.07rem;
                            border: 0;
                            border-radius: 3px;
                            background: #ff976a;
                            outline: none;
                        }
                    }
                   
                }
            }
        }
    }
}
</style>
